<!DOCTYPE html>
<html lang="en">
<head th:include="certificateWeb/headFoot :: headerCss">
</head>
<link rel="stylesheet" href="/css/certificateWeb/workNews/workNews.css">
<style type="text/css">
    td {
        border: 1px #666 solid;
        height: 38px;
        padding: 0 10px;
    }

    .t1 {
        width: 100px;
    }

    .t2 {
        width: 200px;
    }

    /*.divs{*/
    /*margin-left: 90px;*/
    /*}*/
    .but {
        width: 130px;
        height: 40px;
        background: #ffae48;
        margin-left: 45%;
        margin-top: 60px;
        margin-bottom: 50px;
        color: white;
        border: 0;
        font-weight: bold;
    }
</style>
<body id="body">
<div th:include="certificateWeb/headFoot :: header"></div>
<main id="main">
    <section class="sec_1">
        <div class="div_1">
            <ul>
                <li><a href="/certificate/my">个人信息</a></li>
                <!-- <li><a href="/certificate/findApplyExam">报名记录</a></li> -->
                <li><a href="/certificate/infoRecordList">表单提交记录</a></li>
                <li><a href="/certificate/expertRecordList">专家申请记录</a></li>
                <li><a href="/certificate/stationRecordList">考核站点申请记录</a></li>
                <li><a href="/certificate/stationPxRecordList">培训基地申请记录</a></li>
                <li><a href="/certificate/gradeQuery">成绩查询</a></li>
                <li><a href="/certificate/message">消息中心</a></li>
                <li><a href="/certificate/mock?grade=2" target="_blank">幼儿照护初级模拟考试</a></li>
                <li><a href="/certificate/mock?grade=1" target="_blank">幼儿照护中级模拟考试</a></li>
                <li><a href="/certificate/mock?grade=0" target="_blank">幼儿照护高级模拟考试</a></li>
            </ul>
        </div>
        <input type="hidden" th:value="${id}" id="id"/>
        <div class="div_2" style="padding: 0 10px">
            <label class="label_title">准考证信息</label>
            <hr/>
            <div id="print-area">
                <h4 style="text-align: center; margin-top: 30px; font-weight: bold" id="tit"></h4>
                <div class="divs" style=" margin-bottom: 50px">
                    <table class="tab1" style="width: 100%;margin:auto;border: 1px #666 solid"></table>
                </div>
            </div>
            <input class="but" onclick="print1();" type="button" value="打印准考证"/>
        </div>
        <div style="clear: both"></div>
    </section>
</main>
<div th:include="certificateWeb/headFoot :: footer"></div>
</body>
<script>
    selInfo();

    function selInfo() {
        ajaxToken("/jzApi/user/selMyExaminationList", "GET", {id: $("#id").val()}, function (res) {
            $("#tit").html(res.cName + '准考证');
            var b = '', c = '';
            res.ebatchs.forEach(function (item, index) {
                b += '<tr>' +
                    '                        <td style="border-right: 1px #666 solid;width: 200px;clear:both; height: 38px;" colspan="2">' + item.ebatchName + '</td>' +
                    '                        <td style="border-right: 1px #666 solid;width: 200px;clear:both; height: 38px;">' + item.examinTime + '</td>' +
                    '                        <td style="width: 100px;clear:both; height: 38px;">' + item.type + '</td>' +
                    '                        <td style="border-right: 1px #666 solid;width: 100px;clear:both;height: 38px;">' + item.roomNumber + '</td>' +
                    '                        <td style="width: 100px;clear:both; height: 38px;">' + item.seatNum + '</td>' +
                    '           </tr>';
            });
            if (res.grade == 0) {
                c = '高级'
            } else if (res.grade == 1) {
                c = '中级'
            } else if (res.grade == 2) {
                c = '初级'
            }
            var a = '<tr>' +
                '                        <td class="t1" style="width: 100px;clear:both;border-right: 1px #666 solid;border-bottom: 1px #666 solid; height: 38px;">考生姓名</td>' +
                '                        <td class="t2"  style="border-right: 1px #666 solid;width: 200px;clear:both;border-bottom: 1px #666 solid; height: 38px;">' + res.name + '</td>' +
                '                        <td class="t1" style="border-right: 1px #666 solid;width: 100px;clear:both;border-bottom: 1px #666 solid; height: 38px;">证件号码</td>' +
                '                        <td class="t2" style="border-right: 1px #666 solid;width: 200px;clear:both;border-bottom: 1px #666 solid; height: 38px;">' + res.idNumber + '</td>' +
                '                        <td width="150px" align="center" style="clear:both;border-bottom: 1px #666 solid; height: 38px;" colspan="2" rowspan="4"><img height="206px" width="147px" src="' + res.photo + '"/></td>' +
                '                    </tr>' +
                '                    <tr>' +
                '                        <td style="border-right: 1px #666 solid;width: 100px;clear:both;border-bottom:1px #666 solid; height: 38px;">性别</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 200px;clear:both;border-bottom: 1px #666 solid; height: 38px;">' + res.sex + '</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 100px;clear:both;border-bottom: 1px #666 solid; height: 38px;">准考证号</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 200px;clear:both;border-bottom: 1px #666 solid; height: 38px;">' + res.ticketNumber + '</td>' +
                '                    </tr>' +
                '                    <tr>' +
                '                        <td style="border-right: 1px #666 solid;width: 100px;clear:both;border-bottom: 1px #666 solid; height: 38px;">报考级别</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 200px;clear:both;border-bottom: 1px #666 solid; height: 38px;">' + c + '</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 100px;clear:both;border-bottom: 1px #666 solid; height: 38px;">报考证书</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 200px;clear:both;border-bottom: 1px #666 solid; height: 38px;">' + res.profileName + '</td>' +
                '                    </tr>' +
                '                    <tr>' +
                '                        <td style="border-right: 1px #666 solid;width: 100px;clear:both;border-bottom: 1px #666 solid; height: 38px;">考试地址</td>' +
                '                        <td style="border-right: 1px #666 solid;clear:both;border-bottom: 1px #666 solid; height: 38px;" colspan="3">' + res.address + '</td>' +
                '                    </tr>' +
                '                    <tr>' +
                '                        <td style="border-right: 1px #666 solid;width: 200px;clear:both;border-bottom: 1px #666 solid; height: 38px;" colspan="2">考试名称</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 200px;clear:both;border-bottom: 1px #666 solid; height: 38px;">考试时间</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 100px;clear:both;border-bottom: 1px #666 solid; height: 38px;">考试类型</td>' +
                '                        <td style="border-right: 1px #666 solid;width: 100px;clear:both;border-bottom: 1px #666 solid; height: 38px;">考场号</td>' +
                '                        <td style="width: 100px;clear:both;border-bottom: 1px #666 solid; height: 38px;">座位号</td>' +
                '                    </tr>' + b;

            $(".tab1").html(a)
        });
    }

    function print1() {
        var printBox = document.getElementById('print-area');
        //拿到打印的区域的html内容
        var newContent = printBox.innerHTML;
        //将旧的页面储存起来，当打印完成后返给给页面。
        var oldContent = document.body.innerHTML;
        //赋值给body
        document.body.innerHTML = newContent;
        //执行window.print打印功能
        window.print();
        // 重新加载页面，以刷新数据。以防打印完之后，页面不能操作的问题
        window.location.reload();
        document.body.innerHTML = oldContent;
        return false;
    }
</script>
</html>